<template>
    <div class="preferential-container" :class="{lcjcont: type==='dyj'}">
        <ul class="top-con-ul">
            <li class="preferential-type-li" :class="{active:type==='yhq'}" @click="toggleType('yhq')">优惠券</li>
            <li class="preferential-type-li" :class="{active:type==='dyj'}" @click="toggleType('dyj')">抵用金</li>
        </ul>
        <Yhq v-if="type === 'yhq'" :yhqcount="yhqcount" :productTypeDtos="productTypeDtos" />
        <Dyj v-else :dyjcount="dyjcount" />
    </div>
</template>
<script>
  import axios from 'axios'
  import {Toast, Indicator} from 'mint-ui'
  import Dyj from '../../components/couponDetail/dyj'
  import Yhq from '../../components/couponDetail/yhq'

  export default {
    middleware: 'auth',
    head () {
      return {
        title: '我的优惠'
      }
    },
    data () {
      return {
        type: 'yhq',
        yhqcount: {},
        dyjcount: {},
        productTypeDtos: []
      }
    },
    components: {
      Dyj, Yhq
    },
    methods: {
      toggleType (type) {
        if (this.type === type) {
          return false
        } else {
          this.type = type
        }
      }
    },
    mounted () {
      Indicator.open()
      var _thiz = this
      axios.all([
        axios.post('/api/getCouponAmount', {}),
        axios.post('/api/getUserLcjDetail', {}),
        axios.post('/api/queryAllProductType', {})
      ]).then(axios.spread(function (yhqcount, dyjcount, productTypeDtos) {
        Indicator.close()
        if (yhqcount && yhqcount.data && yhqcount.data.responseCode === 0) {
          _thiz.yhqcount = yhqcount.data
        }
        if (dyjcount && dyjcount.data && dyjcount.data.responseCode === 0) {
          _thiz.dyjcount = dyjcount.data
        }
        if (productTypeDtos && productTypeDtos.data && productTypeDtos.data.responseCode === 0) {
          _thiz.productTypeDtos = productTypeDtos.data.productTypeDtos
        }
        if ((yhqcount.data && yhqcount.data.responseCode !== 0) || (dyjcount.data && dyjcount.data.responseCode !== 0) || (productTypeDtos.data && productTypeDtos.data.responseCode !== 0)) {
          Toast(yhqcount.data.responseMessage || dyjcount.data.responseMessage || productTypeDtos.data.responseMessage)
        }
      })).catch(errors => {
        Indicator.close()
        console.log(errors)
        Toast('接口异常')
      })
    }

  }
</script>
<style lang="sass">
    .preferential-container
        .top-con-ul
            padding: 0.75rem 0 0.5rem
            text-align: center
            background: #ffffff
            position: fixed
            top: 0
            left: 0
            width: 100%
            z-index: 99
            .preferential-type-li
                display: inline-block
                vertical-align: middle
                box-sizing: border-box
                width: 5rem
                height: 1.5rem
                line-height: 1.5rem
                color: #266DFC
                font-size: 0.7rem
                border: 1px solid #266DFC
                &.active
                    background: #266DFC
                    color: #FFFFFF
</style>